<script setup lang="ts">
import {useCounterStore} from '@/stores/counter.ts'
import {onMounted, ref, watchEffect} from "vue";
import {info} from '@/api/production-type.ts'
import {listProduction} from '@/api/production.ts'
import {addpv} from "@/api/pv.ts";
const counter = useCounterStore()
onMounted(() => {
  counter.scrollToTop()
})
const route=counter.route;
const baseUrl=import.meta.env.VITE_API_URL;
const productTypeInfo = ref()
const getProductType = async (id) => {
  info(id).then((res) => {
    productTypeInfo.value = res.data;
  })
}
const productions=ref([])
const getProductions=(productionTypeId)=>{
  listProduction({productionTypeId:productionTypeId}).then(res=>{
    productions.value = res.data
  })
}
watchEffect(()=>{
  const productionId=route.params.productionId;
  console.log(productionId);
  getProductType(productionId)
  getProductions(productionId)
})
const router=counter.router;
const gotoInfo=(id)=>{
  router.push('/productioninfo/'+id)
  addpv({productionId:id}).then(res=>{

  })
}

</script>

<template>
  <div>
    <el-carousel class="el-carousel__item" :autoplay="false" indicator-position="none" arrow="never">
      <el-carousel-item v-for="item in 1" :key="item">
        <h3 class="small">
          <img v-if="productTypeInfo && productTypeInfo.introductionImg" v-img-lazy="baseUrl+productTypeInfo.introductionImg"/>
          <div class="shuffingtext">
            <span v-if="item == 1">{{productTypeInfo && productTypeInfo.textIntroduction ? productTypeInfo.textIntroduction:''}}</span>
            <span class="spansmall">
              {{productTypeInfo && productTypeInfo.textIntroductionSmall ? productTypeInfo.textIntroductionSmall:''}}
            </span>
          </div>
        </h3>
      </el-carousel-item>
    </el-carousel>
    <div class="production">
      <h1 style="text-align: center;margin-bottom: 50px;">{{productTypeInfo && productTypeInfo.name ? productTypeInfo.name:''}}</h1>
      <div style="width: 100%;display: flex;text-align: center;justify-content: center"
      >
        <el-row  class="content">
          <el-col
              class="row-col"
              v-for="(o, index) in productions"
              :key="o"
              :span="8"
              :offset="index > 0 ? 0.7 : 0"
          >
            <el-card class="el-card-1" :body-style="{ padding: '0px',margin:'0px'}"  shadow="never"  @click="gotoInfo(o.id)">
              <img
                  v-img-lazy="baseUrl+o.cover"  class="image"
              />
              <div class="title-production">
                <span class="info"  @click="gotoInfo(o.id)">{{o.name}}</span>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

    </div>

  </div>
</template>

<style scoped>
.content{
  width: 70%;
}
.el-card-1{
  margin: 10px;width: 100%;height: 96%;
  cursor: pointer;
}
.spansmall{
  font-size: 20px;
  //margin-top: 10px;
  color: #82aa82;
  font-weight: 500;
}
.shuffingtext{
  display: flex;align-items: center;flex-direction: column
}
.title-production{
  height: 100px;
  padding: 14px;text-align: center;
  background-color: #b7c2cc;
  color: #15b565;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}
.info{
  font-weight:550;
  font-size: 20px;
}
.row-col{
  display:flex;justify-content: center;align-content: center;text-align: center;flex-direction: row
}
.info:hover{
  text-decoration:2px underline #83aab1;
  cursor: pointer;
  text-underline-position: under;
}
.image {
  width: 100%;
  height: 400px;
  display: block;
  object-fit: cover;
}
.production{
  margin-top: 50px;
  margin-bottom: 50px;
}
.el-carousel__item {
  height: 100vh;
}
.el-carousel__item h3 {
  color: #694747;
  font-size: 14px;
  opacity: 1;
  line-height: 300px;
  margin: 0;
  text-align: center;
}
.el-carousel__item h3 div{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 40px;
  //font: italic bold 40px '新宋体';
  color: #a1a111;
  font-weight: bolder;
  //text-shadow: 2px 2px 4px #000000; /* 水平偏移2px，垂直偏移2px，模糊半径4px，颜色为黑色 */
}
.small  {
  width: 100%;
  height: 100%;
}
.small img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}
@media (max-width: 850px) {
  .image{
    height: 200px;
  }
  .title-production{
    height: 70px;
  }
  .el-card-1{
    height: 88%;
  }
  .info{
    font-size: 15px;
  }
}
@media (max-width: 540px) {
  .el-carousel__item h3 div{
    font-size: 16px;
  }
  .spansmall{
    font-size: 14px;
  }
  .content{
    width: 100%;
  }
}
</style>